<template>
  <div class="addGoods-wrap">
    <G_header :title="navTitle" />
    <van-row v-show="official">
      <van-col span="6">
        <div class="avatar">
          <van-uploader style="margin: 0 atuo;" v-model="avatarList" :max-count="1" :after-read="afterRead" />
        </div>
      </van-col>
      <van-col span="18">
        <van-cell-group>
          <van-field v-model="from.title" label="标题" placeholder="请输入标题" />
          <van-field v-model="from.sort_title" label="短标题" placeholder="请输入短标题" />
        </van-cell-group>
      </van-col>
    </van-row>
    <van-cell-group v-show="official">
      <van-field v-model="from.keywords" label="关键词" placeholder="请输入关键词,多个请用' , '隔开" />
      <van-switch-cell v-model="from.is_discount" title="是否是打折商品" size="16px" />
      <van-field v-model="from.price" label="价格" placeholder="请输入价格" />
      <van-field v-model="from.original_price" label="原价" placeholder="请输入原价" />
      <van-field v-model="from.pack_price" label="包装费" placeholder="请输入包装费" />
      <van-field v-model="from.member_price" label="会员价" placeholder="请输入会员价" />
      <van-field v-model="from.member_original_price" label="会员原价" placeholder="请输入会员原价" />
      <van-divider content-position="left">商品轮播图片</van-divider>
      <upImage ref="upImages" @upImages="upImages" :images="imagesList" />
      <van-switch-cell v-model="from.is_specification" @change="is_specif" title="是否开启规格" size="16px"/>
      <van-cell-group>
        <van-cell title="输入商品规格" is-link :value="spec_data == null ? '未选择' :'已选择' " @click="goods_Show = true" clickable />
      </van-cell-group>
      <van-collapse v-model="activeNames">
        <van-collapse-item  title="是否开启库存" >
        <template slot="right-icon">
          <van-switch v-model="from.is_inventory" size="16px"  />
        </template>
        <van-cell-group>
          <van-field v-model="from.inventory" label="库存量" placeholder="请输入库存量" />
          </van-cell-group>
        </van-collapse-item>
      </van-collapse>
    </van-cell-group>
    <van-cell-group>
      <van-switch-cell v-model="from.is_hot" size="16px" title="热销" />
      <van-switch-cell v-model="from.is_recommend" size="16px" title="推荐" />
      <van-switch-cell v-model="from.is_specialty" size="16px" title="招牌" />
      <van-switch-cell v-model="from.status" title="状态" size="16px"  />
    </van-cell-group>
    <van-cell-group v-show="official">
      
      <van-field v-model="from.sort" label="排序" placeholder="请输入排序" />
      <van-field v-model="from.remark" label="商品描述" placeholder="请输入商品描述" />
    </van-cell-group>
    <div style="padding: 10px">
      <van-button @click="rulesSubData" size="normal" block type="info">保存</van-button>
    </div>
    <van-popup :style="{ height :'90%' }" v-model="goods_Show" position="bottom">
      <goodSku @onsku="onSku" :sku="goodsSkuData" />
    </van-popup>
  </div>
</template>

<script>
import { Notify,Toast } from 'vant';
import goodSku from '@/common/goods/goodSku';
import upImage from '@/common/upImage';
export default {
  name: 'AddGoods',
  data(){
    return {
      navTitle: '',
      subType: '',
      spec_warp: false,
      arrTop: [],
      show: false,
      popupHeight: '100%',
      sepcListTitle:[
        {
          title:'',
        }
      ],
      list:[],
      sepcList:[],
      sepcList_item:[],
      sepc_list_item:[],
      sepcData: '',
      from:{
        avatar: null,
        sort_title:null,
        title:null,
        keywords:null,
        is_discount:null,
        price:10,
        original_price:20,
        pack_price:0,
        member_price:0,
        member_original_price:20,
        is_specification: 0,
        is_inventory:0,
        inventory:0,
        status:1,
        sort:0,
        remark:null,
        is_hot: true,
        is_recommend: 0,
        is_specialty: 0
      },
      spec_price: null,
      spec_data: null,
      activeNames:[],
      avatarList:[
        
      ],
      imagesList:null,
      sepc_price_lists: null,
      imageList:[],
      fileList: [
        // { url: 'https://img.yzcdn.cn/vant/cat.jpeg' },
      ],
      imagesName:[],
      goods_Show: false,
      goodsSkuData:null,
      imagesStr: '',
      official: true
    }
  },
  components:{
    goodSku,
    upImage
  },
  created(){
    console.log(this.$route.official);
    
    if(this.$route.params.official){
      this.official = false
    }
    this.subType = this.$route.params.type;
    if(this.$route.params.type == 'add'){
      this.navTitle = '添加商品';
      this.id = this.$route.params.id;
    }else if(this.$route.params.type == 'edit'){
      this.id = this.$route.params.item.id;
      this.is_edit();
    }
  },
  methods:{
    rulesSubData(){
      if(this.from.title == null){
        Toast('请输入标题');
      }else if(this.from.sort_title == null){
        Toast('请输入短标题');
      }else if(this.from.price == null) {
         Toast('请输入价格');
      }else {
        this.sub()
      }
    },
    sub(){
      this.$refs.upImages.upImages();
      let params = new FormData();
      let status = this.from.status ? 'Normal' : 'Unshelve';
      params.append('token',sessionStorage.getItem("token"));
      params.append('avatar',this.from.avatar);
      params.append('sort_title',this.from.sort_title);
      params.append('title',this.from.title);
      params.append('keywords',this.from.keywords);
      params.append('is_discount',this.from.is_discount ? 1 : 0);
      params.append('price',this.from.price);
      params.append('pack_price',this.from.pack_price);
      params.append('original_price',this.from.original_price);
      params.append('member_price',this.from.member_price);
      params.append('member_original_price',this.from.member_original_price);
      params.append('is_specification',this.from.is_specification ? 1 : 0);
      params.append('is_inventory',this.from.is_inventory ? 1 : 0);
      params.append('inventory',this.from.is_inventory ? from.inventory : 999);
      params.append('status',status);
      params.append('images',this.imagesList);
      params.append('sort',this.from.sort);
      if(this.from.is_specification){
        let spec_data = JSON.stringify(this.spec_data)
        let spec_price = JSON.stringify(this.spec_price)
        params.append('spec_data',spec_data);
        params.append('spec_price',spec_price);
      }
      params.append('remark',this.from.remark);
      params.append('is_hot',this.from.is_hot ? 1 : 0);
      params.append('is_recommend',this.from.is_recommend ? 1 : 0);
      params.append('is_specialty',this.from.is_specialty ? 1 : 0);
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
        loadingType: 'spinner'
      });
      if(this.subType == 'add'){ //添加商品
        this.axios.post('/api/store/manager/good/create/'+this.id,params)
        .then(res=>{
          Toast("添加成功");
          Notify({ type: 'success',background: '#07c160', message: res.data.message });
          this.$router.go(-1);
        })
        .catch(err=>console.log(err))
      }else if(this.subType == 'edit'){ //编辑商品
         this.axios.post('/api/store/manager/good/edit/'+this.id,params)
        .then(res=>{
          Toast("编辑成功");
          if(res.data.code == 200){
            Notify({ type: 'success',background: '#07c160', message: res.data.message });
            this.$router.go(-1);
          }
        })
        .catch(err=>{
           Notify({ type: 'success', message: '修改失败' });})
        }
      },
    afterRead(file,index) {
      this.$toast.loading({
        mask: true,
        message: '上传中...'
      });
      let params = new FormData();
      params.append('token',sessionStorage.getItem("token"))
      params.append('avatar',file.file)
      this.axios.post('/api/store/manager/good/avatar/',params).then(r=>{
        this.$toast('上传成功');
        this.from.avatar = r.data.data;
      }).catch(e=>{
        console.log(e)
      })
    },
    upImages(e){
      let imges = JSON.stringify(e);
      this.imagesList = imges;
    },
    arr(data){
        let arr = [];
        data.children.forEach(item=>{
            arr.push(item[0]);
        })
        return arr;
    },
    onClickLeft(){
      this.show = false;
    },
    is_specif(){
      console.log(this.from.is_specification);
    },
    is_edit(){
      this.navTitle = `编辑商品${this.$route.params.item.title}`;
      let data = this.$route.params.item; 
      this.imagesList = JSON.parse(data.images)
      this.goodsSkuData = {
        spec_price: data.spec_price,
        type: data.type
      }
      this.spec_price = data.spec_price;
      this.spec_data = data.type;
      let params = {};
      this.avatarList.push({url: data.avatar});
      params.avatar = data.avatar;
      let images = JSON.parse(data.images);
      if(images != null){
          images.forEach(item=>{
          this.fileList.push({url:item})
        })
      }
      params.sort_title = data.sort_title;
      params.title = data.title;
      params.keywords = data.keywords;
      params.is_discount = data.is_discount ? true : false;
      params.price = data.price;
      params.original_price = data.original_price;
      params.pack_price = data.pack_price;
      params.member_price = data.member_price;
      params.member_original_price = data.member_original_price;
      params.is_specification = data.is_specification ? true : false;
      params.is_inventory = data.is_inventory ?  true : false;
      params.inventory = data.inventory || 0;
      params.status = data.status ? 'Normal' : 'Unshelve';
      params.sort = data.sort;
      params.remark = data.remark;
      params.is_hot = data.is_hot ?  true : false;
      params.is_recommend = data.is_recommend ? true : false;
      params.is_specialty = data.is_specialty ?  true : false;
      params.spec_data =  JSON.stringify(data.type);
      params.sepc_price = JSON.stringify(data.sepc_price);
      this.from = params;
    },
    onSku(){
      this.goods_Show = false;
      this.spec_data = this.$store.state.addGoodSepcData;
      this.spec_price = this.$store.state.addGoodSpecPrice;
    }
  }
}
</script>
<style scoped>
.avatar {
  text-align: center;
  padding: 5px 7px 0
}
.images {
  padding: 5px 3px 5px 17px;
}
.table-list {
  width: 100%;
}
</style>
